<template>
    <view class="main">
        <LoadPage :show="show" />
        <nut-sticky>
            <view class="search">
                <nut-searchbar @search="search" placeholder="搜索" v-model="serverQuery.search"
                    input-background="#f6f6f6">
                    <template #leftin>
                        <nut-icon name="search2" />
                    </template>
                </nut-searchbar>
            </view>
            <view class="cate dispaly-center">
                <view class="item" v-for="(item, index) in cateList" :key="item.type" @click="sort(item, index)">
                    <view class="dispaly-center">
                        <view :class="{ 'active': current == index }" class="name">{{ item.name }}</view>
                        <view class="p-sort" v-if="item.type == 3">
                            <view class="dispaly-col-center" style="height: 25rpx !important;">
                                <nut-icon name="triangle-up" size="10"
                                    :custom-color="sortCurrent == 0 ? '#FB4E47' : '#CECECE'"></nut-icon>
                                <nut-icon name="triangle-down" size="10"
                                    :custom-color="sortCurrent == 0 ? '#CECECE' : '#FB4E47'"></nut-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </nut-sticky>

        <view class="list dispaly-just-between flex-warp">
            <view class="item" v-for="item in serverList" :key="item.id"
                @click="$goUrl(`/subPackage/server/serverDetail?id=${item.id}`)">
                <view class="cover">
                    <image :src="item.image.split(',')[0]" mode="aspectFill" />
                </view>
                <view class="con">
                    <view class="name over-1">{{ item.name }}</view>
                    <view class="s">已售{{ item.sales || 0 }}</view>
                    <view class="op dispaly-just-between">
                        <view class="op-left dispaly-center">
                            <nut-price :price="item.money" :decimal-digits="2" :thousands="true" />
                            <nut-price :price="item.oldMoney" :decimal-digits="2" :thousands="true" strike-through
                                size="small" />
                        </view>
                        <!-- <view class="op-right">
                            <image src="/static/icon/cart.png" mode="aspectFill" />
                        </view> -->
                    </view>
                </view>
            </view>
        </view>
        <LoadMore :status="status" />
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getServerList } from '@/api/apiList'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
// 获取服务
let serverQuery = reactive({
    pageNum: 1,
    pageSize: 16,
    search: '',
    sort: 'desc',
    sortName: 'sort'
})
const serverList = ref([])
let status = ref('noMore')
let show = ref(true)
const getServerListData = async () => {
    status.value = 'loading';
    const res = await getServerList(serverQuery)
    console.log(res, 're-------=====-----')
    if (res.code == 200) {
        if (res.rows.length) {
            serverList.value = [...serverList.value, ...res.rows]
            status.value = 'noMore'
        } else {
            status.value = 'noMore'
        }
        show.value = false
    }
}

// 搜索 
const search = () => {
    serverQuery.pageNum = 1
    serverList.value = []
    getServerListData()
}

onLoad((option) => {
    serverQuery.search = option.key
    getServerListData()
})
const cateList = ref([
    { name: '综合', type: 1, sort: 'sort' },
    { name: '最新', type: 2, sort: 'create_time' },
    { name: '价格', type: 3, sort: '' },
    { name: '销量', type: 4, sort: 'sales' },
])

const current = ref(0)
const sortCurrent = ref(0)
const sort = (item, index) => {
    serverQuery.pageNum = 1
    serverList.value = []
    current.value = index
    if (item.type == 3) {
        if (sortCurrent.value == 0) {
            sortCurrent.value = 1
            serverQuery.sort = 'asc'
        } else {
            sortCurrent.value = 0
            serverQuery.sort = 'desc'
        }
    } else {
        serverQuery.sortName = item.sort
    }
    getServerListData()
}

onReachBottom(() => {
    serverQuery.pageNum++
    getServerListData()
})

onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    serverList.value = []
    serverQuery.pageNum = 1
    serverQuery.sort = 'asc'
    serverQuery.sortName = 'sort'
    current.value = 0
    await getServerListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})
</script>
<style lang="scss" scoped>
.active {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #FB4E47 !important;
}

:deep(.nut-price) {
    margin-right: 15rpx;
}

:deep(.nut-price--strike) {
    color: #999999;
}

.main {
    .cate {
        background-color: #fff;
        padding: 40rpx 0;

        .item {
            padding: 0 50rpx;

            .name {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #000000;
            }
        }
    }

    .list {
        padding: 20rpx 30rpx;

        .item {
            margin-bottom: 30rpx;

            .cover {
                image {
                    border-radius: 12rpx 12rpx 0 0;
                    width: 330rpx;
                    height: 340rpx;
                }
            }

            .con {
                padding: 24rpx;
                background-color: #fff;
                border-radius: 0rpx 0rpx 12rpx 12rpx;
                max-width: 330rpx;
                box-sizing: border-box;

                .name {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #111111;
                }

                .s {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #999999;
                    margin: 24rpx 0 38rpx 0;
                }

                .op {
                    .op-right {
                        image {
                            width: 50rpx;
                            height: 50rpx;
                        }

                    }
                }
            }


        }
    }
}
</style>